<template>
  <div class="console">
    <CardList></CardList>

    <el-row :gutter="20">
      <el-col :sm="24" :md="12" :lg="12">
        <ActiveUser :pageViews="userSessions" :key="sessionsKey" />
      </el-col>
      <el-col :sm="24" :md="12" :lg="12">
        <SalesOverview :userSessions="pageViews" :key="sessionsKey" />
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <template v-for="n in subjectTrend" :key="n">
        <el-col :sm="24" :md="12" :lg="6">
          <SalesClassification :type="n" :trendInfo="subjectPieData(n)" :key="trendKey" />
        </el-col>
      </template>
    </el-row>

    <el-row :gutter="20">
      <template v-for="n in 2" :key="n">
        <el-col :sm="24" :md="24" :lg="12">
          <NewUser :type="n" />
        </el-col>
      </template>
    </el-row>

    <!-- <AboutProject /> -->
  </div>
</template>

<script setup lang="ts">
import CardList from './widget/CardList.vue'
import ActiveUser from './widget/ActiveUser.vue'
import SalesOverview from './widget/SalesOverview.vue'
import NewUser from './widget/NewUser.vue'
import SalesClassification from './widget/SalesClassification.vue'
import { getStatData, getBrowseStaticInfo } from '@/api/questionbank'

const trendInfo = ref([])
const trendKey = ref(0)
const subjectTrend = ref(['1', '4', '5', '6'])
const sessionsKey = ref(0)

const getStatcInfo = async () => {
  const res = await getStatData({ type: 0 })
  trendInfo.value = res.data
  trendKey.value = new Date().getTime()
}

const subjectPieData = (id: any) => {
  if (trendInfo.value.length) {
    return trendInfo.value.find((e: any) => e.categoryId === id)
  } else {
    return {
      carStatDataList: []
    }
  }
}

const userSessions = ref({})
const pageViews = ref({})
const getBrowseData = async () => {
  const res = await getBrowseStaticInfo({ days: 30 })
  if (res.code === '00000' && res.data) {
    userSessions.value = res.data.find((e: any) => e.type === '01')
    pageViews.value = res.data.find((e: any) => e.type === '02')
    sessionsKey.value = new Date().getDate()
  }
}

onMounted(() => {
  getStatcInfo()
  getBrowseData()
})
</script>

<style lang="scss" scoped>
@use './style';
</style>
